<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>我的代办任务</span>
      </div>
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="创建时间：">
          <el-date-picker
              v-model="dateRange"
              size="small"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="doSearch">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card">
      <el-table :data="pageData.data" style="width: 100%" border>
        <el-table-column prop="id" label="任务ID" width="250px"></el-table-column>
        <el-table-column prop="name" label="任务名称"></el-table-column>
        <el-table-column prop="assignee" label="任务办理人"></el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column label="操作" width="240px">
          <template slot-scope="scope">
            <div v-if="scope.row.assignee === '待认领'">
              <el-button
                  size="mini"
                  type="success"
                  @click="claimTask(scope.$index, scope.row)">
                认领任务
              </el-button>
            </div>
            <div v-else>
              <el-button
                  size="mini"
                  type="danger"
                  @click="unclaimTask(scope.$index, scope.row)">
                取消认领
              </el-button>
              <el-button
                  size="mini"
                  type="primary"
                  @click="handleDeal(scope.$index, scope.row)">
                办理任务
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageData.pageNo"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageData.totalCount">
      </el-pagination>
      <el-dialog :title="'办理任务'" :visible.sync="dialogFormVisible">
        <el-form :model="saveForm" ref="saveForm" label-width="100px">
          <el-form-item label="活动名称" prop="name">
            <el-input v-model="saveForm.name" autocomplete="off" style="width:220px" readonly></el-input>
          </el-form-item>
          <el-form-item label="活动折扣" v-if="saveForm.type==1" prop="discount">
            <el-input v-model="saveForm.discount" autocomplete="off" style="width:220px" readonly></el-input>
          </el-form-item>
          <el-form-item label="活动代金券" v-if="saveForm.type==2" prop="vouchers">
            <el-input v-model="saveForm.vouchers" autocomplete="off" style="width:220px" readonly></el-input>
          </el-form-item>
          <el-form-item label="开始时间" prop="beginTime">
            <el-date-picker
                v-model="saveForm.beginTime"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                :readonly="true"
                placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间" prop="endTime">
            <el-date-picker
                v-model="saveForm.endTime"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                :readonly="true"
                placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="活动简介" prop="info">
            <el-input type="textarea" v-model="saveForm.info" autocomplete="off" style="width:500px"
                      readonly></el-input>
          </el-form-item>

          <!-- 添加评论展示区域 -->
          <el-form-item label="历史评论">
            <el-table :data="comments" style="width: 100%" border size="mini">
              <el-table-column prop="userId" label="用户ID" width="100"></el-table-column>
              <el-table-column prop="time" label="评论时间" width="160">
                <template slot-scope="scope">
                  {{ scope.row.time | formatDate }}
                </template>
              </el-table-column>
              <el-table-column prop="message" label="评论内容"></el-table-column>
            </el-table>
          </el-form-item>
          <el-form-item label="审核意见" prop="info">
            <el-input type="textarea" v-model="saveForm.comment" autocomplete="off" style="width:500px"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="handlerPass('通过')">同 意</el-button>
          <el-button type="primary" @click="handlerPass('驳回')">驳 回</el-button>
        </div>
      </el-dialog>
    </el-card>

  </div>
</template>

<script>

export default {
  data() {
    return {
      dhlxOptions: [],
      qdOptions: [],
      dateRange: [],
      //查询的数据模型
      searchForm: {
        //过滤条件
        beginTime: null,
        endTime: null,
        //分页条件
        pageNo: 1,
        pageSize: 5,
      },
      //分页数据模型
      pageData: {
        data: [], // 分页数据
        pageNo: 1, // 当前页
        pageSize: 5, // 一页的大小
        totalCount: 0, // 总数据量
        totalPageCount: 0, // 总页数
      },
      //控制对话框显示还是隐藏
      dialogFormVisible: false,
      //新增的数据模型
      saveForm: {
        id: null,
        name: null,
        discount: null,
        vouchers: null,
        beginTime: null,
        endTime: null,
        info: null,
        taskId: null,
        comment: null,
      },
      comments: [], // 添加评论数据
    };
  },
  created() {
    this.doSearch();
  },
  methods: {
    //清空新增表单数据
    //清空新增表单数据
    reset() {
      this.saveForm = {
        id: null,
        name: null,
        discount: null,
        vouchers: null,
        beginTime: null,
        endTime: null,
        info: null,
        taskId: null,
        comment: null,
      };
    },
    //查询用户信息
    doSearch() {
      //获取开始时间和结束时间
      if (this.dateRange) {
        this.searchForm.beginTime = this.dateRange[0]
        this.searchForm.endTime = this.dateRange[1]
      } else {
        this.searchForm.beginTime = null;
        this.searchForm.endTime = null;
      }
      this.$axios.get("/api/workFlow/loadTask", {params: this.searchForm})
          .then((res) => {
            if (res.data.code == 200) {
              this.pageData.pageNo = res.data.data.pageNo;
              this.pageData.pageSize = res.data.data.pageSize;
              this.pageData.totalCount = res.data.data.totalCount;
              this.pageData.totalPageCount = res.data.data.totalPageCount;
              this.pageData.data = res.data.data.data;
            } else {
              this.$message.error(res.data.msg);
            }
          })
          .catch((err) => {
            console.log(err);
          });
    },
    //改变每页显示的条数
    handleSizeChange(val) {
      this.searchForm.pageSize = val;
      this.doSearch();
    },
    //改变当前的页码数
    handleCurrentChange(val) {
      this.searchForm.pageNo = val;
      this.doSearch();
    },

    // 获取任务评论
    loadComments(taskId) {
      this.$axios.get(`/api/workFlow/loadComment/${taskId}`)
          .then((res) => {
            if (res.data.code == 200) {
              this.comments = res.data.data;
            } else {
              this.$message.error(res.data.msg);
            }
          })
          .catch((err) => {
            console.log(err);
          });
    },
    //根据任务id查询对应的活动实例
    handleDeal(index, row) {
      //1.清空模型数据
      this.reset();
      //2.查询要修改的数据
      this.$axios.get("/api/workFlow/loadTask/" + row.id).then((res) => {
        if (res.data.code == 200) {
          this.saveForm = res.data.data;
          this.saveForm.taskId = row.id;
          // 加载评论信息
          this.loadComments(row.id);
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch((err) => {
        console.log(err);
      })
      //3.显示对话框
      this.dialogFormVisible = true;
    },

    //认领任务
    claimTask(index, row) {
      this.$axios.post("/api/workFlow/claimTask/" + row.id).then((res) => {
        if (res.data.code == 200) {
          this.$message.success(res.data.msg);
          this.doSearch()
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch((err) => {
        console.log(err);
      })

    },

    //取消认领
    unclaimTask(index, row) {
      this.$axios.post("/api/workFlow/unclaimTask/" + row.id).then((res) => {
        if (res.data.code == 200) {
          this.$message.success(res.data.msg);
          this.doSearch();
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch((err) => {
        console.log(err);
      })

    },
    //完成驳回任务
    handlerPass(type) {
      let workFlow = {
        businessId: this.saveForm.id,
        taskId: this.saveForm.taskId,
        comment: this.saveForm.comment,
        outcome: type
      }
      this.$axios.put("/api/workFlow/completeTask", workFlow).then((res) => {
        if (res.data.code == 200) {
          this.dialogFormVisible = false;
          this.$message.success(res.data.msg);
          this.doSearch();
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch((err) => {
        console.log(err);
      })

    }
  },
}
</script>

<style scoped>
</style>